<template>
    <div class="Personalschedule">
        <div class="Personalschedule-head">
            <label>
                <span>我的课程表</span>
            </label>
            <label class="create-myclass">
                <span @click="Tomake()">{{TeachcourseNavListIndex == 0?'订阅课程':TeachcourseNavListIndex == 1?'预约私教':'预约课程'}}</span>
            </label>
            <!-- <label class="Timersvalues">
                <el-date-picker v-model="Timersvalue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </label>
            <label class="screenings">
                <span>筛选</span>
            </label> -->
        </div>
        <div class="Personalschedule-content">
            <div class="Personalschedule-content-nav">
                <ul>
                    <li v-for="(item,index) in TeachcourseNavList" :key="index" @click="Tabescelect(index)" :class="TeachcourseNavListIndex ==index?'navelecet':''">{{item}}</li>
                </ul>
            </div>
            <div class="Personalschedule-content-content" v-if="TeachcourseNavListIndex==0">
                <div class="Personalschedule-class-List">
                    <ul v-if="TeachcourseInfoList.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无订阅课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in TeachcourseInfoList" :key="index" @click="Todetlis(item)">
                            <div class="Personalschedule-class-List-content">
                                <label>
                                    <img :src="item.map.masterAppointmentEntity.cover" alt="" v-if="item.map.masterAppointmentEntity !=undefined">
                                </label>
                                <label class="Personalschedule-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/视频直播icon@2x.png" v-if="item.classroom_type == 'online_video'" style="width: 74px;height: 21px;"/>
                                        <img src="/images/语音直播@2x.png" v-else style="width: 74px;height: 21px;"/>
                                        <span v-if="item.map.masterAppointmentEntity !=undefined">{{item.map.groupinfo.group_name}}</span>
                                    </label>
                                    <label v-if="item.map.masterAppointmentEntity !=undefined">
                                        <span>{{item.map.groupinfo.language_level}}</span>
                                        <span>{{item.map.groupinfo.language}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Isopenclasses">
                                        <span @click.stop="unsubscribe(item.id)">取消订阅</span>   
                                        <span @click.stop="Gotoclass(item.map.groupinfo.id)">进入班级</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="TeachcourseInfoList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Personalschedule-content-content" v-else-if="TeachcourseNavListIndex==1">
                <div class="Personalschedule-class-List">
                    <ul v-if="Personaltraining.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in sijiaokebiao" :key="index">
                            <div class="Personalschedule-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="">
                                </label>
                                <label class="Personalschedule-class-Info">
                                    <label class="Personal-training">
                                        <span>{{item.title}}</span>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personal-training-footer">
                                        <span>修改</span>
                                        <span v-if="item.status == 5">取消预约中</span>
                                        <span @click="cancellation(item)" v-else>取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraining.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Personalschedule-content-content" v-else-if="TeachcourseNavListIndex==2">
                 <div class="Personalschedule-class-List">
                    <ul v-if="Personaltraining.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in Personaltraining" :key="index">
                            <div class="Personalschedule-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="">
                                </label>
                                <label class="Personalschedule-class-Info">
                                    <label class="Personal-training">
                                        <span>{{item.title}}</span>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personal-training-footer">
                                        <span>修改</span>
                                        <span v-if="item.status == 5">取消预约中</span>
                                        <span @click="cancellation(item)" v-else>取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraining.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Personalschedule-content-content" v-else-if="TeachcourseNavListIndex==3">
                 <div class="Personalschedule-class-List">
                    <ul v-if="Personaltraining.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in Personaltraining" :key="index">
                            <div class="Personalschedule-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="">
                                </label>
                                <label class="Personalschedule-class-Info">
                                    <label class="Personal-training">
                                        <span>{{item.title}}</span>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personal-training-footer">
                                        <span>修改</span>
                                        <span v-if="item.status == 5">取消预约中</span>
                                        <span @click="cancellation(item)" v-else>取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraining.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Personalschedule-content-content" v-else-if="TeachcourseNavListIndex==4">
                 <div class="Personalschedule-class-List">
                    <ul v-if="Personaltraining.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in Personaltraining" :key="index">
                            <div class="Personalschedule-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="">
                                </label>
                                <label class="Personalschedule-class-Info">
                                    <label class="Personal-training">
                                        <span>{{item.title}}</span>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personal-training-footer">
                                        <span>修改</span>
                                        <span v-if="item.status == 5">取消预约中</span>
                                        <span @click="cancellation(item)" v-else>取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraining.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="Lvie-cl-de-con-pagination">
            <el-pagination background layout="prev, pager, next" :page-size="8" :total="total" @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:'Personalschedule',
    inject: ['reload'],
    data(){
        return{
            currentPage:0,
            Timersvalue:new Date,
            TeachcourseNavList:['直播课堂讲师','私教','跨境助学师','母语助学师','专业助学师'],
            TeachcourseNavListIndex:0,
            TeachcourseInfoList:[],
            TeachcourseInfoLists:[
            ],
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            Personaltraining:[],
            total:100,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
            quxiaoing:false,
            sijiaokebiao:[],
        }
    },
    mounted(){
        this.GetMyClassInfo()
    },
    methods: {
        handleCurrentChange(val) {
            this.currentPage = val
            console.log(this.currentPage)
            this.GetMyClassInfo()
        },
        Tabescelect(e){//选项卡切换
            this.TeachcourseNavListIndex = e
            this.GetMyClassInfo()
            if(this.TeachcourseNavListIndex == 1){
                this.getsijiaokebiao()
            }
        },
        getsijiaokebiao(){
            let data = {
                currentPage:this.currentPage,
                user_id:this.unserinfo.user_id,
                master_type:'private_education',
                pageSize:6,
            }
            this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryUserSchedule',
                    params:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    this.sijiaokebiao = res.data.data
                    this.sijiaokebiao.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times)); 
                        e['create_time'] = times
                        e['start_time'] = starttime
                        e['end_time'] = endtime
                    })
                }).catch((error) =>{
                    console.log(error)
                })
        },
        Todetlis(item){
            console.log(item)
            this.$router.push({path:'/views/Learningcenter/Teachingcentercoursedetails',query: {id: item.map.masterAppointmentEntity.id}})
        },
        Tomake(){
            if(this.TeachcourseNavListIndex == 0){//订阅课程
                this.$router.push({path:'/views/Learningcenter/Bookingliveprogrammes'})
            }else if (this.TeachcourseNavListIndex == 1){//预约私教
                this.$router.push({path:'/views/Learningcenter/Booksijiao'})
            }else{//预约助学师课程
                console.log(this.TeachcourseNavListIndex)
                this.$router.push({path:'/views/Learningcenter/Tomakeanappointmentcourse',query:{TeachcourseNavListIndex:this.TeachcourseNavListIndex}})
            }
            
        },
        Gotoclass(e){//直播课堂班级详情
            this.$router.push({path:'/views/Learningcenter/Classdetails',query: {id: e}})
        },
        GetMyClassInfo(){//获取我的课程表
            if(this.TeachcourseNavListIndex == 0){
                var data ={
                    currentPage:this.currentPage,
                    pageSize:8,
                    type:"open_class",
                    user_id:this.unserinfo.user_id
                }
                this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/user/userClass/queryUserClassSchedule',
                    params:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    this.TeachcourseInfoList =res.data.data
                    console.log(this.TeachcourseInfoList)
                    if(this.TeachcourseInfoList.length != 0){
                        this.TeachcourseInfoList.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times)); 
                        e['create_time'] = times
                        e['start_time'] = starttime
                        e['end_time'] = endtime
                        // console.log(e.map.masterAppointmentEntity.language_level)
                        if(e.map.masterAppointmentEntity != undefined){
                            if(e.map.masterAppointmentEntity.language_level == 'Zero basis'){
                                e.map.groupinfo['language_level'] = '零基础'
                            }else if(e.map.masterAppointmentEntity.language_level == 'Intermediate'){
                                e.map.groupinfo['language_level'] = '中级'
                            }else if(e.map.masterAppointmentEntity.language_level == 'Primary'){
                                e.map.groupinfo['language_level'] = '初级'
                            }else if(e.map.masterAppointmentEntity.language_level == 'Intermediate'){
                                e.map.groupinfo['language_level'] = '中级'
                            }
                            this.languageEn.forEach(function(j){
                                if(j[e.map.groupinfo['language']]){
                                    e.map.groupinfo['language']=j[e.map.groupinfo['language']]
                                } 
                            })
                        }
                        
                    })
                }
                }).catch((error) =>{
                    console.log(error)
                })
            }else{
               var data ={
                    currentPage:this.currentPage,
                    pageSize:8,
                    type:"single_class",
                    user_id:this.unserinfo.user_id
                }
                this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryUserSchedule',
                    params:data,
                }).then((res) =>{
                    console.log(res.data.data,'私教课程')
                    this.Personaltraining = res.data.data
                    this.Personaltraining.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times)); 
                        e['create_time'] = times
                        e['start_time'] = starttime
                        e['end_time'] = endtime
                    })
                }).catch((error) =>{
                    console.log(error)
                })  
            }
        },
        unsubscribe(id){//取消订阅
            let _this = this
            var data ={
                id : id,
            }
            this.$axios({
                methods:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userClass/delete',
                params:data,
            }).then((res)=>{
                if(res.data.code ==0){
                    alert("取消订阅成功")
                    _this.reload()
                }
            }).catch((err)=>{
                console.log(err)
            })
        },
        cancellation(item){//取消预约
            console.log(item)
            var data ={
                id:item.id,
                master_id:item.master_id,
                status :5,
                update_identity:'user',
                update_type:'cancel',
                user_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/update',
                data:data,
            }).then((res) =>{
                console.log(res.data.data)
                if(res.data.code == 0){
                    alert(res.data.message)
                    this.quxiaoing  = true
                }else{
                    alert(res.data.message)
                }
                alert(res.data.message)
            }).catch((error) =>{
                console.log(error)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.Noclass{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .noClassimg{
        width: 65px;
        height: 55px;
    }
}
.Noclass>label{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.Noclass>label>span{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #d8d8d8;
    margin-top: 10px;
}
    .Personalschedule{
        position: relative;
        width: 100%;
        border-radius: 20px;
        background: #ffffff;
        min-height: 1041px;
    }
    /*头部样式*/
    .Personalschedule-head{
        position: relative;
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #2DC7C8;
        label{
            height: 30px;
            &:first-child{
                width: 12%;
                height: 20px;
                color: #2DC7C8;
                font-weight: bold;
                border-left: 8px solid #2DC7C8;
                padding-left: 1%;
            }
        }
    }
    .create-myclass{
        width: 16%;
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        background:rgba(45,199,200,1);
        border-radius:15px;
        margin-left: 10%;
        span{
            display: inline-block;
            background-image: url('/images/icon 拷贝@2x.png');
            background-repeat: no-repeat;
            background-position-y: 50%;
            padding-left: 14%;
            cursor: pointer;
        }
    }
    .Timersvalues{
        width: 44%;
        margin-left: 4%;
        /deep/.el-range-editor{
            width: 100%;
            height: 30px;
            border-radius: 15px;
            border: 1px solid #47CECF;
            /deep/.el-range-separator{
                line-height: 22px;
            }
            /deep/.el-range__icon{
                line-height: 22px;
            }
            /deep/.el-range__close-icon{
                display: none;
            }
        }
    }
    .screenings{
        width: 10%;
        padding-left: 2%;
        span{
            display: inline-block;
            width: 100%;
            height: 30px;
            background:rgba(71,206,207,1);
            border-radius:15px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
    }
    /*内容样式*/
    .Personalschedule-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        min-height: 800px;
        height: auto;
    }
    .Personalschedule-content-content{
        position: relative;
        width: 100%;
        min-height: 800px;
        height: auto;
    }
    /*tabs选项卡切换*/
    .Personalschedule-content-nav{
        position: relative;
        width: 100%;
        height: 50px;
        ul{
            display: flex;
            list-style: none;
            height: 50px;
            align-items: center;
            justify-content: flex-end;
            padding: 0;
            li{
                height: 50px;
                line-height: 50px;
                border:1px solid transparent;//解决点击选中后变形问题
                text-align: center;
                cursor: pointer;
                margin-left: 40px;
            }
        }
    }
    .navelecet{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8!important;
    }
    /*列表样式*/
    .Personalschedule-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
            }
        }
    }
    .Personalschedule-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Personalschedule-class-List-content>label:first-child{
        width: 34%;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 100%;
            height: 143px;
        }
    }
    .Personalschedule-class-Info{
        width: 50%;
        height: 70%; 
        padding-left: 6%;
        h2{
            color: #555555;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 0;
        }
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 10%;
                    text-align: left;
                }
            }
        }
    }
    .Personalschedule-class-Info>.Personalschedule-class-Infos{
        display: flex;
        align-items: center;
        margin-top: 10px;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 70%;
        }
    }
    .Isopenclasses{
        justify-content: flex-end;
        span{
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Personalschedule-class-info-head{
        span{
            display:flex;
            margin-left: 0!important;
            overflow: hidden;
            color: #555555;
            font-size: 18px;
            font-weight: bold;
        }
    }
    .Personal-training>span{
        margin-left: 0!important;
        font-size: 16px;
        font-weight: bold;
    }
    .Personal-training-footer{
        display: flex;
        justify-content: flex-end;
        color: #2DC7C8;
        span{
            cursor: pointer;
        }
    }
    .nodates{
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            width: 100%;
            text-align: center;
            flex-wrap: wrap;
            img{
                width: 63px;
                height: 51px;
            }
        }
        span{
            display: inline-block;
            width: 100%;
            color: #e7e7e7;
            margin-top: 10px;
        }
    }
</style>